<template>
  <PageContainer>
    <Header title="转移超管权限">
      <view class="hb-h-9 hb-box-content hb-py-2 hb-px-4">
        <TSearch text="搜索" @confirm="handleConfirm"></TSearch>
      </view>
    </Header>
    <view>
      <view class="hb-p-4 hb-pb-0">
        <TmRadioGroup v-model="selected">
          <template v-for="item in dataList" :key="item.id">
            <view class="hb-w-full">
              <MemberItem :item="item" @click="handleSelectItem(item)">
                <TmRadio
                  :margin="[0, 0, 24, 0]"
                  :size="40"
                  :disabled="item.isActivate === 0"
                  :value="item.id"
                />
              </MemberItem>
            </view>
          </template>
        </TmRadioGroup>
        <Empty v-if="dataList.length === 0" />
      </view>
      <BottomSubmit
        :submit-btn-disabled="!selected"
        submit-btn-label="转移超级管理员"
        @submit="handleShowModal"
      />

      <TmModal
        v-model:show="modalVisible"
        title="转移超级管理员"
        :height="300"
        :follow-theme="false"
        cancel-text="取消"
        cancel-color="#969799"
        ok-color="primary"
        ok-text="确认转移"
        @ok="handleSelectSubmit"
      >
        <view class="hb-text-sm hb-text-[#333] hb-text-center">
          <text>确定要把超级管理员转移给“</text>
          <text class="hb-text-primary">{{ getItem?.displayName }}</text>
          <text>”吗？转移后，您将失去管理员身份。</text>
        </view>
      </TmModal>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* transferSuperAdmin 转移超管权限 */
  import { selectCircleMemberList, transferSuperAdmin } from '@/api/contact';
  import { CircleMemberListResult } from '@/api/contact/types';
  import MemberItem from '../components/MemberItem.vue';
  import { Toast } from '@/utils';
  import { TabbarPageEnum } from '@/enums/PageEnum';
  import { useUserStore } from '@/store/modules/user';

  const dataList = ref<CircleMemberListResult[]>([]);
  const circlesId = ref<number>(0);
  const selected = ref<number>();
  const getItem = computed(() => dataList.value.find((item) => item.id === selected.value));

  const modalVisible = ref<boolean>(false);

  customOnload<'transferSuperAdmin'>((op) => {
    circlesId.value = op.id;
    getDataList();
  });

  const getDataList = (keyWord?: string) => {
    selectCircleMemberList({ id: circlesId.value, keyWord }).then((res) => {
      dataList.value = res;
    });
  };

  const handleSelectItem = (v: CircleMemberListResult) => {
    selected.value = v.id;
  };

  /** 搜索 */
  const handleConfirm = (val: string) => {
    getDataList(val);
  };

  const handleShowModal = () => {
    if (!selected.value) {
      Toast({
        title: '请选择转移对象',
      });
      return;
    }
    modalVisible.value = true;
  };

  const handleSelectSubmit = () => {
    transferSuperAdmin({ circleId: circlesId.value, toUserId: selected.value! }).then(() => {
      useUserStore().getUserInfo();
      Toast({
        title: '转移成功',
        success: () => {
          switchTab(TabbarPageEnum.BASE_HOME);
        },
      });
    });
  };
</script>

<style lang="scss" scoped></style>
